<%@ page import="com.atguigu.service.impl.ServiceServiceImpl" %>
<%@ page import="com.atguigu.service.ServiceService" %>
<%@ page import="com.atguigu.service.ServerService" %>
<%@ page import="com.atguigu.service.impl.ServerServiceImpl" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="/pages/common/headAndWelcome.jsp" %><%--静态引用,包括项目起始点,和css,jquery等头部信息 --%>
    <title>project</title>

<%--<div class="project-fluid "> <!--table行-->--%>

<div class="container" style="width: 800px">
    <h1 class="text-center"><span class="uppercase">project配置页面</span></h1>
    <table class="table table-striped table-bordered table-hover col-md-6 col-lg-6 project" style="table-layout:inherit">
        <thead class="thead">
        <tr>
            <th class="col-md-1 "><input type="checkbox"> 全选</th>
            <th class="col-md-1 ">编号</th>
            <th class="col-md-2 ">名称</th>
            <th class="col-md-2 text-center">操作
            </th>
        </tr>
        </thead>
            <tbody>
            <% Integer count=1;%>
            <c:forEach items="${requestScope.projects}" var="project" varStatus="projectStatus">
                <tr class="tr">
                    <td class="number">
                        <input type="checkbox">
                        <%=count++%>
                    </td>
                    <td class="id">${project.id}</td>
                    <td class="name">${project.name}</td>
                    <td class="detail text-center">
                        <div class="btn-group">
                            <div class="btn btn-default glyphicon glyphicon-pencil edit hand" ></div>
                            <div class="btn btn-default glyphicon glyphicon-ok update hand"></div>
                            <div class="btn btn-default glyphicon glyphicon-remove delete hand"></div>
                        </div>
                    </td>
                </tr>
            </c:forEach>
            <tr class="tr">
                <td class="number">
                    <input type="checkbox">
                    <%=count++%>
                </td>
                <td class="id createSign">创建时会自动添加</td>
                <td class="name">
                    <input class="form-control nameEdit" placeholder="如:xxx工程" type="text">
                </td>
                <td class="detail text-center col-lg-1">
                    <div class="btn-group">
                        <div class="btn btn-default glyphicon glyphicon-pencil edit hand" ></div>
                        <div class="btn btn-default glyphicon glyphicon-ok update hand"></div>
                        <div class="btn btn-default glyphicon glyphicon-remove delete hand"></div>
                    </div>
                </td>
            </tr>
            </tbody>
    </table><!--project区-->
</div>
<div class="container" style="width: 1500px">
    <h1 class="text-center"><span class="uppercase">module配置页面</span></h1>
    <table class="table table-striped table-bordered table-hover col-md-6 col-lg-6 module" style="table-layout:inherit"><!--module区-->
        <thead class="thead">
        <tr>
            <th class="col-md-1 "><input type="checkbox"> 全选</th>
            <th class="col-md-2 ">编号</th>
            <th class="col-md-1 ">project名称</th>
            <th class="col-md-1 ">名称</th>
            <th class="col-md-3 ">codeRepository</th>
            <th class="col-md-1 ">模块类型</th>
            <th class="col-md-2 ">deployPullRootUrl</th>
            <th class="col-md-1 text-center">操作
            </th>
        </tr>
        </thead>
        <tbody>
        <% Integer countModule=1;%>
        <c:forEach items="${requestScope.projectModules}" var="projectModule" varStatus="projectModuleStatus">
            <tr class="tr">
                <td class="number">
                    <input type="checkbox">
                    <%=countModule++%>
                </td>
                <td class="id">${projectModule.id}</td>
                <td class="project">
                    <select class="projectIdEdit form-control col-sm-2">
                        <c:forEach items="${requestScope.projects}" var="project">
                            <option value="${project.id}"
                            <c:if test="${projectModule.projectId==project.id}">
                                selected
                            </c:if>
                            >${project.name}</option>
                        </c:forEach>
                    </select>
                </td>
                <td class="name">
                    <input type="text" class="form-control projectModuleNameEdit" placeholder="模块名:如:www" value="${projectModule.name}">
                </td>
                <td class="codeRepository">
                    <input type="text" class="form-control codeRepositoryEdit" placeholder="代码仓库:如:svn://aaa" value="${projectModule.codeRepository}">
                </td>
                <td class="projectModuleTypeId">
                    <select class="projectModuleTypeIdEdit form-control col-sm-1">
                        <c:forEach items="${requestScope.projectModuleTypes}" var="projectModuleType" varStatus="projectModuleTypeStatus">
                            <option value="${projectModuleType.id}"
                                    <c:if test="${projectModule.projectModuleTypeId==projectModuleType.id}">
                                        selected
                                    </c:if>
                            >${projectModuleType.name}</option>
                        </c:forEach>
                    </select>
                </td>
                <td class="deployPullRootUrl">
                    <input type="text" class="form-control deployPullRootUrlEdit" placeholder="模块名:如:http://devops-test.36ve.com/code/3.0/zyk/" value="${projectModule.deployPullRootUrl}">
                </td>
                <td class="detail text-center">
                    <div class="btn-group">
                        <div class="btn btn-default glyphicon glyphicon-ok update hand"></div>
                        <div class="btn btn-default glyphicon glyphicon-remove delete hand"></div>
                    </div>
                </td>
            </tr>
        </c:forEach>
        <tr class="tr">
            <td class="number">
                <input type="checkbox">
                <%=countModule++%>
            </td>
            <td class="id createSign">创建时会自动添加</td>
            <td class="project">
                <select class="projectIdEdit form-control col-sm-2">
                    <c:forEach items="${requestScope.projects}" var="project">
                        <option value="${project.id}">${project.name}</option>
                    </c:forEach>
                </select>
            </td>
            <td class="name">
                <input type="text" class="form-control projectModuleNameEdit" placeholder="模块名:如:www" >
            </td>
            <td class="codeRepository">
                <input type="text" class="form-control codeRepositoryEdit" placeholder="代码仓库:如:svn://aaa">
            </td>
            <td class="projectModuleTypeId">
                <select class="projectModuleTypeIdEdit form-control col-sm-1">
                    <c:forEach items="${requestScope.projectModuleTypes}" var="projectModuleType" varStatus="projectModuleTypeStatus">
                        <option value="${projectModuleType.id}">${projectModuleType.name}</option>
                    </c:forEach>
                </select>
            </td>
            <td class="deployPullRootUrl">
                <input type="text" class="form-control deployPullRootUrlEdit" placeholder="模块名:如:http://devops-test.36ve.com/code/3.0/zyk/" >
            </td>
            <td class="detail text-center">
                <div class="btn-group">
                    <div class="btn btn-default glyphicon glyphicon-ok update hand"></div>
                    <div class="btn btn-default glyphicon glyphicon-remove delete hand"></div>
                </div>
            </td>
        </tr>
        </tbody>
    </table><!--projectModule区-->
</div>
<div class="container" style="width: 1000px">
    <h1 class="text-center"><span class="uppercase">moduleType配置页面</span></h1>
    <table class="table table-striped table-bordered table-hover col-md-6 col-lg-6 moduleType" style="table-layout:inherit"><!--moduleType区-->
        <thead class="thead">
        <tr>
            <th class="col-md-1 "><input type="checkbox"> 全选</th>
            <th class="col-md-2 ">编号</th>
            <th class="col-md-2 ">name</th>
            <th class="col-md-2 text-center">操作
            </th>
        </tr>
        </thead>
        <tbody>
        <% Integer countModuleType=1;%>
        <c:forEach items="${requestScope.projectModuleTypes}" var="projectModuleType" varStatus="projectModuleStatus">
            <tr class="tr">
                <td class="number">
                    <input type="checkbox">
                    <%=countModuleType++%>
                </td>
                <td class="id">${projectModuleType.id}</td>
                <td class="name">
                    <input type="text" class="form-control projectModuleTypeNameEdit" placeholder="模块类型:如:php" value="${projectModuleType.name}">
                </td>
                <td class="detail text-center">
                    <div class="btn-group">
                        <div class="btn btn-default glyphicon glyphicon-ok update hand"></div>
                        <div class="btn btn-default glyphicon glyphicon-remove delete hand"></div>
                    </div>
                </td>
            </tr>
        </c:forEach>
        <tr class="tr">
            <td class="number">
                <input type="checkbox">
                <%=countModuleType++%>
            </td>
            <td class="id createSign">创建时会自动添加</td>
            <td class="name">
                <input type="text" class="form-control projectModuleTypeNameEdit" placeholder="模块类型:如:php" >
            </td>
            <td class="detail text-center">
                <div class="btn-group">
                    <div class="btn btn-default glyphicon glyphicon-ok update hand"></div>
                    <div class="btn btn-default glyphicon glyphicon-remove delete hand"></div>
                </div>
            </td>
        </tr>
        </tbody>
    </table><!--projectModuleType区-->
</div>
    <form class="bs-example bs-example-form dropdownAndInputForm changeTarget hidden" role="form">
        <!--这一区域默认是隐藏的,其负责给点击"服务和容器"添加数据-->
        <div class="row">
            <div class="col-lg-6">
                <div class="input-group">
                    <div class="input-group-btn">
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                            <span class="text">二级</span>
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu dropdownAndInput">
                            <li>
                                <a class="option">nginx</a>
                            </li>
                            <li>
                                <a class="option">php</a>
                            </li>
                            <li>
                                <a class="option">docker</a>
                            </li>
                        </ul>
                    </div><!-- /btn-group -->
                    <input type="text" class="form-control input" style="width: 100px">
                </div><!-- /input-group -->
            </div><!-- /.col-lg-6 -->
        </div><!-- /.row -->
    </form> <!--这一区域默认是隐藏的,其负责给点击"服务和容器"添加数据-->
    <div class="modal fade " id="update" tabindex="-1" role="dialog" aria-labelledby="updateLabel" aria-hidden="true">
        <!--这一区域是用来为update行为提供模态框的-->
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="updateLabel">提交修改</h4>
                </div>
                <div class="modal-body">是否确认?</div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="submitUpdate">提交更改</button>
                </div>
            </div>
        </div>
    </div><!--这一区域是用来为update行为提供模态框的-->
    <div class="modal fade " id="delete" tabindex="-1" role="dialog" aria-labelledby="deleteLabel" aria-hidden="true">
        <!--这一区域是用来为delete行为提供模态框的-->
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="deleteLabel">提交删除</h4>
                </div>
                <div class="modal-body">是否确认?</div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="submitDelete">提交删除</button>
                </div>
            </div>
        </div>
    </div><!--这一区域是用来为delete行为提供模态框的-->
    <p>config按钮要做成跳转的,在后台拿到配置文件在前台做textarea  创建 定义 配置 (详细配置 生成服务)</p>
<%--</div>--%>
<!--table行-->
</body>
<script>
    $(".project").click(function (event) {//detail 操作模块的点击事件,利用冒泡
        let eventTarget = $(event.target);
        let trObj=$(eventTarget).closest(".tr");
        if (eventTarget.hasClass('edit')){//此时,已经明确了触发事件的元素是"edit"元素,下一步获取整个tr对象
            let trObj=eventTarget.closest(".tr");//下一步,把tr每一项作为input,等待修改:策略->"td不多,根据class获取td;根据td.innhtml获取text,作为input的value"
            if(trObj.find(".form-control").length>0){
                return ;
            }
            trObj.children().each(function (index,element){
                let inputCreate=document.createElement("input");
                inputCreate.className="form-control"
                switch ($(element).attr("class")){
                    case "name":
                        inputCreate.classList.add("nameEdit");
                        inputCreate.value=element.innerText;
                        $(element).html('').append(inputCreate);
                        break;
                    default:
                    // console.log('default')
                }
            })
        }//此时,已经明确了触发事件的元素是"edit"元素,下一步获取整个tr对象
        if (eventTarget.hasClass('update')) {//此时,已经明确了触发事件的元素是"create"元素,下一步获取整个tr-json对象
            if (eventTarget.closest(".tr").find(".form-control").length>=1) {
                $("#update").modal("show")
                $('.yaotijiaodedian').remove('yaotijiaodedian')
                $(eventTarget).addClass("yaotijiaodedian")
            } else {
                confirm("没有修改,不能提交")
            }
        }//此时,已经明确了触发事件的元素是"update"元素,下一步获取整个tr-json对象
        if (eventTarget.hasClass('delete')) {//此时,已经明确了触发事件的元素是"delete"元素,下一步获取整个tr-id
            $("#delete").modal("show")
            $('.yaotijiaodedian').remove('yaotijiaodedian')
            $(eventTarget).addClass("yaotijiaodedian")
        }//此时,已经明确了触发事件的元素是"delete"元素,下一步获取整个tr-id
    })//table 的点击事件,利用冒泡
    $(".module").click(function (event){
        let eventTarget = $(event.target);
        let trObj=$(eventTarget).closest(".tr");
        if (eventTarget.hasClass('update')) {//此时,已经明确了触发事件的元素是"create"元素,下一步获取整个tr-json对象
            if (eventTarget.closest(".tr").find(".form-control").length>=1) {
                $("#update").modal("show")
                $('.yaotijiaodedian').remove('yaotijiaodedian')
                $(eventTarget).addClass("yaotijiaodedian")
            } else {
                confirm("没有修改,不能提交")
            }
        }//此时,已经明确了触发事件的元素是"update"元素,下一步获取整个tr-json对象
        if (eventTarget.hasClass('delete')) {//此时,已经明确了触发事件的元素是"delete"元素,下一步获取整个tr-id
            $("#delete").modal("show")
            $('.yaotijiaodedian').remove('yaotijiaodedian')
            $(eventTarget).addClass("yaotijiaodedian")
        }//此时,已经明确了触发事件的元素是"delete"元素,下一步获取整个tr-id
    })
    $(".moduleType").click(function (event){
        let eventTarget = $(event.target);
        let trObj=$(eventTarget).closest(".tr");
        if (eventTarget.hasClass('update')) {//此时,已经明确了触发事件的元素是"create"元素,下一步获取整个tr-json对象
            if (eventTarget.closest(".tr").find(".form-control").length>=1) {
                $("#update").modal("show")
                $('.yaotijiaodedian').remove('yaotijiaodedian')
                $(eventTarget).addClass("yaotijiaodedian")
            } else {
                confirm("没有修改,不能提交")
            }
        }//此时,已经明确了触发事件的元素是"update"元素,下一步获取整个tr-json对象
        if (eventTarget.hasClass('delete')) {//此时,已经明确了触发事件的元素是"delete"元素,下一步获取整个tr-id
            $("#delete").modal("show")
            $('.yaotijiaodedian').remove('yaotijiaodedian')
            $(eventTarget).addClass("yaotijiaodedian")
        }//此时,已经明确了触发事件的元素是"delete"元素,下一步获取整个tr-id
    })


    $("#submitUpdate").click(function () {//这是更新的模态框点击了确定键后搜索数据并提交的过程
        //console.log(1)
        let eventTarget = $('.yaotijiaodedian')
        let trObjData = {};
        let table=eventTarget.closest("table");
        let trObj=eventTarget.closest(".tr");
        if(table.hasClass("project")){
            //获取serverId
            let idObj=trObj.find(".id");
            if(idObj.hasClass("createSign")){//有新增标志
                trObjData["id"]=null;
            }else{//没有新增标识,表示update,需要从单元格中获取project Id
                trObjData["id"]=idObj.text();
            }//获取projectId
            let arr = ["name"];
            trObj.find(".form-control").each(function (index,element){
                for (let i in arr) { //不写这个就要把上面的这个if写5次
                    if ($(element).hasClass(arr[i] + "Edit")) {
                        trObjData[arr[i]] = $(element).val()
                    }
                }//不写这个就要把上面的这个if写8次
            })//收集参数
            // console.log(trObj)
            // return
            console.log(trObjData)
            //return
            $.ajax({
                type: "post",
                url: "<%=basepath%>projectServlet?action=ajaxUpdateProject",
                data: trObjData,
                success: function (response, status, xhr) {
                    console.log("收到回信")
                    console.log(response)
                    if (response == "存入成功") {
                        //console.log("存入成功")
                        alert("存入成功")
                        location.href = "<%=basepath%>projectServlet?action=listProject";
                    } else {
                        alert("存入失败,请看consoleLog");
                    }
                },
                timeout: 10000, //如果超时1000毫秒，就结束
                error: function (xhr, errorText, errorType) { //错误后的行为
                    console.log("回信异常")
                    console.log("errorText:" + errorText); //error
                    console.log("errorType:" + errorType); //not found
                    console.log("xhr.status:" + xhr.status); //404
                    console.log("xhr.statusText:" + xhr.statusText); //not found
                },
                dataType: "text" //类型还有json,能免去接受到回复后,处理json文本后的过程 还有xml类型,一般不用 最好一直用text
            })//ajax
        }
        if(table.hasClass("module")){
            let idObj=trObj.find(".id");
            if(idObj.hasClass("createSign")){//有新增标志
                trObjData["id"]=null;
            }else{//没有新增标识,表示update,需要从单元格中获取project Id
                trObjData["id"]=idObj.text();
            }//获取projectId
            let arr = ["projectId","projectModuleName","codeRepository","projectModuleTypeId","deployPullRootUrl"];
            //trObj.find(".form-control").each(function (index,element){
            //    console.log($(element).attr("class"));
            //})
            trObj.find(".form-control").each(function (index,element){
                for (let i in arr) { //不写这个就要把上面的这个if写5次
                    if ($(element).hasClass(arr[i] + "Edit")) {
                        trObjData[arr[i]] = $(element).val()
                    }
                }//不写这个就要把上面的这个if写8次
            })//收集参数
            // console.log(trObj)
            // return
            //console.log(trObjData)
            //return
            $.ajax({
                type: "post",
                url: "<%=basepath%>projectServlet?action=ajaxUpdateProjectModule",
                data: trObjData,
                success: function (response, status, xhr) {
                    console.log("收到回信")
                    console.log(response)
                    if (response == "存入成功") {
                        //console.log("存入成功")
                        alert("存入成功")
                        location.href = "<%=basepath%>projectServlet?action=listProject";
                    } else {
                        alert("存入失败,请看consoleLog");
                    }
                },
                timeout: 10000, //如果超时1000毫秒，就结束
                error: function (xhr, errorText, errorType) { //错误后的行为
                    console.log("回信异常")
                    console.log("errorText:" + errorText); //error
                    console.log("errorType:" + errorType); //not found
                    console.log("xhr.status:" + xhr.status); //404
                    console.log("xhr.statusText:" + xhr.statusText); //not found
                },
                dataType: "text" //类型还有json,能免去接受到回复后,处理json文本后的过程 还有xml类型,一般不用 最好一直用text
            })//ajax
        }
        if(table.hasClass("moduleType")){
            let idObj=trObj.find(".id");
            if(idObj.hasClass("createSign")){//有新增标志
                trObjData["id"]=null;
            }else{//没有新增标识,表示update,需要从单元格中获取project Id
                trObjData["id"]=idObj.text();
            }//获取projectId
            let arr = ["projectModuleTypeName"];
            //trObj.find(".form-control").each(function (index,element){
            //    console.log($(element).attr("class"));
            //})
            trObj.find(".form-control").each(function (index,element){
                for (let i in arr) { //不写这个就要把上面的这个if写5次
                    if ($(element).hasClass(arr[i] + "Edit")) {
                        trObjData[arr[i]] = $(element).val()
                    }
                }//不写这个就要把上面的这个if写8次
            })//收集参数
            //console.log(trObj)
            //return
            //console.log(trObjData)
            //return
            $.ajax({
                type: "post",
                url: "<%=basepath%>projectServlet?action=ajaxUpdateProjectModuleType",
                data: trObjData,
                success: function (response, status, xhr) {
                    console.log("收到回信")
                    console.log(response)
                    if (response == "存入成功") {
                        //console.log("存入成功")
                        alert("存入成功")
                        location.href = "<%=basepath%>projectServlet?action=listProject";
                    } else {
                        alert("存入失败,请看consoleLog");
                    }
                },
                timeout: 10000, //如果超时1000毫秒，就结束
                error: function (xhr, errorText, errorType) { //错误后的行为
                    console.log("回信异常")
                    console.log("errorText:" + errorText); //error
                    console.log("errorType:" + errorType); //not found
                    console.log("xhr.status:" + xhr.status); //404
                    console.log("xhr.statusText:" + xhr.statusText); //not found
                },
                dataType: "text" //类型还有json,能免去接受到回复后,处理json文本后的过程 还有xml类型,一般不用 最好一直用text
            })//ajax
        }
    })//这是更新的模态框点击了确定键后搜索数据并提交的过程
    $("#submitDelete").click(function () {//这是更新的模态框点击了确定键后搜索数据并提交的过程
        let eventTarget = $('.yaotijiaodedian')
        let table=eventTarget.closest("table");
        let trObj=eventTarget.closest(".tr");
        if(table.hasClass("project")){
            $.ajax({
                type: "post",
                url: "<%=basepath%>projectServlet?action=ajaxDeleteProject",
                data: {"id": trObj.find(".id:first").text()},
                success: function (response, status, xhr) {
                    console.log("收到回信")
                    console.log(response)
                    if (response == "删除成功") {
                        alert("删除成功")
                        location.href = "<%=basepath%>projectServlet?action=listProject";
                    } else {
                        alert("删除失败");
                    }
                },
                timeout: 10000, //如果超时1000毫秒，就结束
                error: function (xhr, errorText, errorType) { //错误后的行为
                    console.log("回信异常")
                    console.log("errorText:" + errorText); //error
                    console.log("errorType:" + errorType); //not found
                    console.log("xhr.status:" + xhr.status); //404
                    console.log("xhr.statusText:" + xhr.statusText); //not found
                },
                dataType: "text" //类型还有json,能免去接受到回复后,处理json文本后的过程 还有xml类型,一般不用 最好一直用text
            })//ajax
        }
        if(table.hasClass("module")){
            $.ajax({
                type: "post",
                url: "<%=basepath%>projectServlet?action=ajaxDeleteProjectModule",
                data: {"id": trObj.find(".id:first").text()},
                success: function (response, status, xhr) {
                    console.log("收到回信")
                    console.log(response)
                    if (response == "删除成功") {
                        alert("删除成功")
                        location.href = "<%=basepath%>projectServlet?action=listProject";
                    } else {
                        alert("删除失败");
                    }
                },
                timeout: 10000, //如果超时1000毫秒，就结束
                error: function (xhr, errorText, errorType) { //错误后的行为
                    console.log("回信异常")
                    console.log("errorText:" + errorText); //error
                    console.log("errorType:" + errorType); //not found
                    console.log("xhr.status:" + xhr.status); //404
                    console.log("xhr.statusText:" + xhr.statusText); //not found
                },
                dataType: "text" //类型还有json,能免去接受到回复后,处理json文本后的过程 还有xml类型,一般不用 最好一直用text
            })//ajax
        }
        if(table.hasClass("moduleType")){
            $.ajax({
                type: "post",
                url: "<%=basepath%>projectServlet?action=ajaxDeleteProjectModuleType",
                data: {"id": trObj.find(".id:first").text()},
                success: function (response, status, xhr) {
                    console.log("收到回信")
                    console.log(response)
                    if (response == "删除成功") {
                        alert("删除成功")
                        location.href = "<%=basepath%>projectServlet?action=listProject";
                    } else {
                        alert("删除失败");
                    }
                },
                timeout: 10000, //如果超时1000毫秒，就结束
                error: function (xhr, errorText, errorType) { //错误后的行为
                    console.log("回信异常")
                    console.log("errorText:" + errorText); //error
                    console.log("errorType:" + errorType); //not found
                    console.log("xhr.status:" + xhr.status); //404
                    console.log("xhr.statusText:" + xhr.statusText); //not found
                },
                dataType: "text" //类型还有json,能免去接受到回复后,处理json文本后的过程 还有xml类型,一般不用 最好一直用text
            })//ajax
        }
    })//这是删除的模态框点击了确定键后搜索数据并提交的过程



</script>
<!--表格点击事件-->
</html>